<template>
  <div class="warningCard info_containerBacInfoStyle marginBottom15 info_containerPadding">
    <div class="flex-top">
      <img
        class="warning_img"
        :src="
          require('../../../assets/img/warning_img/' +
            this.warningObj.type +
            '-' +
            this.warningObj.severityColor.toLowerCase() +
            '.png')
        "
        :alt="this.warningObj.typeName"
      />
      <div class="warning_titleInfo">
        <h3>{{ this.warningObj.title }}</h3>
        <p>
          发布时间：<span>{{ time }}</span>
        </p>
      </div>
    </div>
    <p class="warning_textInfo">{{ this.warningObj.text }}</p>
    <!-- 说明 -->
    <div class="warning_explainInfo">
      <h3>说明</h3>
      <p>这次预警的严重级别为：{{ newsTitle }}</p>
      <p style="margin-top: 0">{{ severity_levenTextFn }}</p>
    </div>
  </div>
</template>

<script>
import { currTime, SeverityType } from "../../../utils/tools";
//
import { severityTypeTextObj } from "../../../config/severityText.js";

export default {
  name: "WarningCard",
  data() {
    return {};
  },
  props: {
    warningObj: Object,
  },
  computed: {
    time() {
      return currTime(this.warningObj.endTime);
    },
    severity_levenTextFn() {
      return new SeverityType(
        this.warningObj.type,
        severityTypeTextObj
      ).severityLevel();
    },
    newsTitle() {
      let newFirst = this.fns(),
        newTwo = this.fns(),
        newTest = "";
      [...this.warningObj.title]
        .splice(newFirst("["), newTwo("]"))
        .forEach((item) => {
          newTest += item;
        });
      return newTest;
    },
  },
  methods: {
    fns() {
      return (is_field) => {
        return [...this.warningObj.title].findIndex((item) => {
          return item === is_field;
        });
      };
    },
  },
};
</script>

<style scoped>
.warningCard {
  border-radius: 0.16rem;
  width: 100%;
  height: auto;
}
.warningItem:nth-child(1) {
  margin-top: 0;
}
.warning_img {
  width: 0;
  height: 0.73rem;
  flex: 0 0 0.86rem;
  margin-right: 0.2rem;
}
.warning_titleInfo h3 {
  font-size: 0.18rem;
}
.warning_titleInfo p {
  font-size: 0.13rem;
  margin-top: 0.07rem;
}
.warning_textInfo {
  font-size: 0.15rem;
  margin-top: 0.2rem;
  line-height: 0.25rem;
}
.warning_explainInfo {
  margin-top: 0.15rem;
  padding: 0.13rem 0.16rem;
  background-color: rgba(235, 237, 240);
  border-radius: 0.16rem;
}
.warning_explainInfo h3 {
  font-size: 0.16rem;
}
.warning_explainInfo p {
  margin-top: 0.1rem;
  font-size: 0.14rem;
  line-height: 0.2rem;
}
</style>